<template>
  <div class="identity">
    <!--<header class="space-around normal">-->
      <!--<i class="ion-ios-arrow-back large " @click="routerBack()"></i>-->
      <!--&lt;!&ndash;<div style="margin-right: 12%">我的收藏</div>&ndash;&gt;-->
      <!--<input class="search-input normal" type="text" v-model="search" placeholder="输入标题关键字快速查询">-->
      <!--<i class="ion-ios-search large search"></i>-->
    <!--</header>-->
    <div class="one">
        <div class="collection flex-start" v-for="(v,index) in query()">
          <router-link tag="div" :to="{path:'/common/subDetail',query:{bookId:collection[index].bookId,title:collection[index].bookName}}">
            <div class="collection-img">
              <img :src="v.img" alt="">
            </div>
            <div>
              <p class="normal collection-text">{{v.title}}</p>
              <p class="small collection-content">{{v.text}}</p>
            </div>
          </router-link>
        </div>
    </div>

  </div>
</template>
<script>
  import identity from './identity'
  export default{
    data:function() {
      return {
        search: '',
        collection: [
          {
            bookId:'4',
            img: 'static/images/personal-img/0.png',
            bookName:'the dazzling declining sun',
            title: 'He shielded his eyes against the dazzling declining sun.',
            text: 'After school on my way to the dormitory, I saw the sun tanging low above the horizon. The sky was alive with long streaks fored and gold. The sun, at the end of a day journey, made the touds look like the Garden of Eden. Charmed by the scene, I stood still on the path, conscious neither of time, nor space, nor people who paged by. A feeling of happiness and admiration came over me. I was lost in the beauty of nature.'
          },
          {
            bookId:'5',
            img: 'static/images/personal-img/1.png',
            bookName:'It is labour that creates the world',
            title: 'It is labour that creates the world.',
            text: 'Today is Labor Day I wanted sleepy of the problems may depend on how in bed together after a while do not want to mother and father ran hastily from which my father said He Shan and I want your mother to buy a big market Guangcai furniture at home idle you nothing you do for a long time on the work you did not clean your room on ah finished cleaning your room left.'
          },
          {
            bookId:'6',
            img: 'static/images/personal-img/2.png',
            bookName:'I have a little dog and I had a bike',
            title: 'I have a little dog and I had a bike.',
            text: " I'm not gonna tell anybody you bought me the bike, I saw the sun tanging low above the horizon. The sky was alive with long streaks fored and gold. The sun, at the end of a day journey, made the touds look like the Garden of Eden. Charmed by the scene, I stood still on the path, conscious neither of time, nor space, nor people who paged by. A feeling of happiness and admiration came over me. I was lost in the beauty of nature."
          },
          {
            bookId:'7',
            img: 'static/images/personal-img/3.png',
            bookName:'About me',
            title: "But mum, I'm not the Kong Fu panda!",
            text: "I know you study Chinese culture for years. What's your attitude to those kind of negative voice? "
          },
          {
            bookId:'8',
            img: 'static/images/personal-img/4.png',
            bookName:'Do you believe in magic?',
            title: 'Do you believe in magic?',
            text: 'Arthur hid his treasures here and Merlin enchanted the cave so that nobody should ever find them'
          },
          {
            bookId:'9',
            img: 'static/images/personal-img/5.png',
            bookName:'the dazzling declining sun',
            title: 'He shielded his eyes against the dazzling declining sun.',
            text: 'After school on my way to the dormitory, I saw the sun tanging low above the horizon. The sky was alive with long streaks fored and gold. The sun, at the end of a day journey, made the touds look like the Garden of Eden. Charmed by the scene, I stood still on the path, conscious neither of time, nor space, nor people who paged by. A feeling of happiness and admiration came over me. I was lost in the beauty of nature.'
          },
          {
            bookId:'10',
            img: 'static/images/personal-img/6.png',
            bookName:'the dazzling declining sun',
            title: 'The palace contains many art treasures.',
            text: 'We live under an assumed identity, in a neurotic fairy tale world with no reality than the Mock Turtle in Alice in Wonderland.  at the end of a day journey, made the touds look like the Garden of Eden. Charmed by the scene, I stood still on the path, conscious neither of time, nor space, nor people who paged by. A feeling of happiness and admiration came over me. I was lost in the beauty of nature.'
          },
          {
            bookId:'11',
            img: 'static/images/personal-img/7.png',
            bookName:'the dazzling declining sun',
            title: 'Alice in Wonderland',
            text: 'She waited, standing on the bridge, until his figure vanished against the grey backdrop of the Palace  The sky was alive with long streaks fored and gold. The sun, at the end of a day journey, made the touds look like the Garden of Eden. Charmed by the scene, I stood still on the path, conscious neither of time, nor space, nor people who paged by. A feeling of happiness and admiration came over me. I was lost in the beauty of nature.'
          }
        ]
      }
    },
    components: {
      identity: identity
    },
    methods: {
      routerBack:function() {
        this.$router.back()
      },
      query: function () {
        var that = this
        return that.collection.filter(function (v) {
          return v.title.indexOf(that.search) !== -1
        })
      }
    },
    filters: {
      uppercase: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  }
</script>
<style>
  .collection {
    height: 80px;
    background: #fff;
    margin: 5px 0;

  }
  .collection>div{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .collection img {
    margin: 10px 10px;
    width: 50px;
  }

  .collection-text {
    text-align: left;
    font-weight: bold;
  }

  .collection-content {
    width: 90%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #a4a4a9;
    margin-top: -10px;
  }

  /*.search {*/
    /*position: absolute;*/
    /*right: 7%;*/
    /*color: #c7c7cd;*/
  /*}*/

  /*.search-input {*/
    /*width: 80%;*/
    /*height: 60px;*/
    /*margin-top: 20px;*/
    /*border-radius: 38px;*/
    /*text-indent: 25px;*/
    /*/!*text-transform: uppercase;*!/*/
  /*}*/
</style>
